<template>
  <view class="title">
    <view class="names">我的购物车</view>
    <view class="del" @click="deleted">
      <image src="../../static/empty.png"></image>
      <view>清空购物车</view>
    </view>
  </view>
  <view class="info">
    <cart_good_item v-for="(item, index) in list" :key="index" :item="item" @cart="cart_good"></cart_good_item>
  </view>
  <cart :sum_price="price" :sum_count="count" :show="cartshow" @addshow="addshow"></cart>
</template>

<script lang="ts" setup>
import { err, toast } from '@/utils/uniapi';
import { api } from '@/api/store_api';
const props = defineProps(['list', 'price', 'count', 'cartshow']);
const emit = defineEmits(['List', 'show']);
function deleted() {
  try {
    const { list } = props;
    const id = list.map((e: any) => e.id);
    wx.showModal({
      title: '提示',
      content: '您确定将所有菜品从购物车中移除吗？',
      complete: async (res: any) => {
        if (res.confirm) {
          try {
            const { respCode, msg } = await api.eletcai({ id });
            if (respCode === 200) {
              toast('删除成功');
              emit('List');
            } else {
              toast(msg);
            }
          } catch (error) {
            err(error);
          }
        }
      }
    });
  } catch (error) {
    err(error);
  }
}
function cart_good() {
  emit('List');
}
function addshow(e: any) {
  emit('show', { show: e.shows });
}
</script>

<style lang="scss" scoped>
  .title {
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    height: 53rpx;
    line-height: 53rpx;
    display: flex;
    background-color: #f8f4e6;
    .names {
      font-size: 20rpx;
      font-family: Source Han Sans CN-Normal, Source Han Sans CN;
      font-weight: 350;
      color: #c32136;
    }
    .del {
      display: flex;
      align-items: center;
      margin-left: auto;
      image {
        width: 20rpx;
        height: 20rpx;
        display: block;
      }
      view {
        font-size: 20rpx;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
  .info {
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 80rpx;
    overflow: auto;
  }
</style>
